<template>
    <div class="order-refund-list">
        <van-list v-model="loading" finished-text="没有更多了" :finished="!loading">
            <template v-for="order in orders">
                <order-refund-list-item v-for="refund in order.refunds"
                                        :key="refund.id" :refund="refund"
                                        :store-id="order.storeId" :store-name="order.storeName"
                                        @cancel="refreshOrders"/>
            </template>
        </van-list>
    </div>
</template>

<script>
  import { message, order, security } from "@mall/api-services"
  import OrderRefundListItem from "@/components/order/OrderRefundListItem"
  import { List, Toast } from "vant"

  export default {
    name: "OrderRefundList",
    components: {
      OrderRefundListItem,
      [List.name]: List,
    },
    data() {
      return {
        loading: false,
        statuses: [order.OrderStatus.AwaitingRefund, order.OrderStatus.Refunded, order.OrderStatus.PartiallyRefunded],
        orders: [],
      }
    },
    created() {
      this.refreshOrders()
    },
    methods: {
      refreshOrders() {
        this.loading = true
        order.OrderServiceV1.createOrderQuery()
          .customerId(security.SecurityUserHolder.getUserId())
          .refundStatuses(this.statuses)
          .list()
          .then(pagedOrder => {
            this.orders = pagedOrder.elements
          })
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => this.loading = false)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-refund-list {

    }
</style>
